<template>
	<div class="banner">
		<!-- 隐藏菜单 -->
		<div :class="[ { 'default' : show } , 'slider' ]">
			<p>
				<router-link to="/" >登录</router-link> / <router-link to="/" >注册</router-link>
			</p>
			<!-- 搜索 -->
			<form class="search" >
				<i class="iconfont" >&#xe617;</i>
				<input type="text" placeholder="泰国" >
			</form>
			<ul>
				<li v-for="item in menus" :key="item.id" >
					<router-link :to="item.url" >{{item.name}}</router-link>
				</li>
			</ul>
		</div>
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<router-link to="/City">
					<!-- 城市切换 -->
					<div class="city">
						<label>{{cityName}}</label><i class="iconfont">&#xe600;</i>
					</div>
				</router-link>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe617;</i><input type="text">
				</form>
				<!-- 导航按钮 -->
				<p class="slider-btn" @click="getShow()">
					<i class="iconfont">&#xe604;</i>
				</p>
			</div>
			<!-- 轮播区域 -->
			<div class="swiper banner-swiper">
				<!-- 主体的滑动区 -->
				<ul class="swiper-wrapper">
					<li class="swiper-slide" v-for="item in maps" :key="item.id" >
						<img :src="item.src">
					</li>
				</ul>
				<!--分页器。如果放置在swiper外面，需要自定义样式。-->
				<div class="swiper-pagination"></div>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入State的辅助函数
	import {mapState} from 'vuex';
	// 1.引入vue周期函数
	import { onMounted } from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper , {
		Autoplay ,
		EffectCoverflow ,
		EffectCube ,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use( [Autoplay ,EffectCoverflow ,EffectCube ,Pagination] );
	
	// 导出
	export default {
		name: 'Banner',
		props:['propsbanner'],
		data()
		{
			return {
				menus : [],
				maps : [
						{ id:1 , src:'img/1.jpg' },
						{ id:2 , src:'img/2.jpg' },
						{ id:3 , src:'img/3.jpg' },
						{ id:4 , src:'img/4.jpg' },
						{ id:5 , src:'img/5.jpg' },
						],
				show : false,
			}
		},
		watch : {
			propsbanner(){
				this.menus = this.propsbanner;
			}
		},
		methods : {
			getShow()
			{
				this.show = !this.show;
			}
		},
		computed:{
			// 接收state内部的cityName变量
			...mapState(['cityName'])
		},
		// 4.设置应用swiper的位置以及具体操作
		setup(){
			onMounted( ()=>{
				new Swiper( '.banner-swiper' , {
					// 循环播放
					loop : true,
					// 设置分页器效果
					pagination : {
						el : '.swiper-pagination'
					},
					// 设置播放项: 时间,不停止,手指经过不暂停自动
					autoplay : {
						delay : 3000,
						stopOnLastSlide : false,
						disableOnInteraction : false
					}
				} )
			} )
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
	}
	/*侧导航栏样式*/
	.slider
	{
		position: absolute;
		left: -6.6rem;
		top: 0;
		z-index: 6;
		background-color: rgba(62,62,62,0.9);
		height: 100%;
		width: 6.6rem;
		transition: all 1s;
	}
	/*动画选择器*/
	.default
	{
		left: 0;
		transition: all 1s;
	}
	.slider a
	{
		text-decoration: none;
		color: white;
	}
	.slider p
	{
		line-height: 1.3rem;
		text-align: right;
		padding-right: 0.3rem;
		color: white;
		font-size: 0.35rem;
	}
	.slider .search
	{
		background-color: #3a3a3a;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
		width: 90%;
		margin: 0.3rem auto;
	}
	.slider .search i
	{
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
		color: white;
	}
	.slider .search input
	{
		background-color: #3a3a3a;
		border: none;
		width: 80%;
		line-height: 0.8rem;
		text-indent: 1em;
		color: white;
	}
	.slider ul
	{
		margin: 0.5rem auto 0;
		width: 95%;
	}
	.slider ul li
	{
		line-height: 1.3rem;
		text-align: left;
		text-indent: 1em;
		font-size: 0.32rem;
		border-top: 0.04rem solid black;
	}
	.slider ul li a
	{
		display: block;
	}
	.slider ul li:nth-last-child
	{
		border-bottom: 0.04rem solid black;
	}
	
	.main
	{
		position: relative;
		width: 100%;
		height: 5.6rem;
	}
	/*顶部样式*/
	.banner-top
	{
		position: absolute;
		left: 0;
		top: 0.3rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 0.8rem;
	}
	.banner-top .city
	{
		color: white;
		font-size: 0.35rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;
	}
	.banner-top .city i
	{
		vertical-align: middle;
		padding-left: 0.1rem;
	}
	.banner-top .search
	{
		flex: 1;
		background-color: white;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
	}
	.banner-top .search i
	{
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}
	.banner-top .search input
	{
		border: none;
		width: 80%;
		line-height: 0.7rem;
		text-indent: 1em;
	}
	.banner-top .slider-btn
	{
		color: white;
		padding-left: 0.4rem;
		padding-right: 0.3rem;
		line-height: 0.8rem;
		vertical-align: middle;
	}
	/*轮播区域的样式*/
	.banner-swiper
	{
		width: 100%;
		height: 5.6rem;
	}
	.banner-swiper img
	{
		width: 100%;
		
		height: 100%;
	}
	/* 穿透 */
	.swiper-pagination:deep(.swiper-pagination-bullet-active)
	{
		background-color: #f6d83f;
	}
</style>
